<template lang="html">
	<div class="workspace">
		<!-- {{revoke_list}} -->
		<ul>
			<li v-for="(item,index) in iconList">
				<el-tooltip class="item" effect="dark" :content="item.title" placement="right" :enterable="false">
					<a v-if="item.isopen === false" :class="{'hueClass': item.hueClass}" @click="revoke(item.fun)">
						<i :class="['iconfont', item.icon]"></i>
					</a>
					<el-popover placement="left" popper-class="exit-popover" trigger="click" v-else-if="item.isopen === true"
					 :disabled="!item.show_tool" transition="none">
						<div class="left-tools" v-show="item.show_tool" @mouseleave="item.show_tool=!item.show_tool">
							<a class="exit" v-for="subitem in item.subleft" @click="distribute_fun(subitem.fun)">
								<i :class="['iconfont', subitem.subicon]"></i>
								{{ subitem.text }} </a>
						</div>
						<a slot="reference" :class="{'hueClass': item.hueClass}" @click="show_menu(index,item.icon)">
							<i :class="['iconfont', item.icon]"></i>
						</a>
					</el-popover>
				</el-tooltip>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'workspace',
		data() {
			return {
				iconList: [{
						icon: 'icon-cancel',
						title: '撤销',
						isopen: false,
						hueClass: true,
						fun: 'revoke'
					},
					{
						icon: 'icon-restore',
						title: '恢复',
						isopen: false,
						hueClass: true,
						fun: 'revokery'
					},
// 					{
// 						icon: 'icon-refresh-preview',
// 						title: '刷新预览',
// 						isopen: false,
// 						hueClass: false
// 					},
					{
						icon: 'icon-copy-page',
						title: '复制当前页',
						isopen: false,
						hueClass: false,
						fun:'copy'
					},
					{
						icon: 'icon-background',
						title: '背景',
						isopen: true,
						hueClass: false,
						show_tool: false,
						subleft: [{
								text: '裁剪',
								subicon: 'icon-crop',
								fun: 'cropper'
							},
							{
								text: '更换',
								subicon: 'icon-replace',
								fun: 'img_replace'
							},
							{
								text: '删除',
								subicon: 'icon-delete-background',
								fun: 'img_del'
							}
						]
					},
					{
						icon: 'icon-music',
						title: '音乐',
						isopen: true,
						hueClass: false,
						show_tool: false,
						subleft: [{
								text: '更换',
								subicon: 'icon-replace',
								fun: 'music_replace'
							},
							{
								text: '删除',
								subicon: 'icon-delete-background',
								fun: 'music_del'
							}
						]
					},
					// { name: 'icon-background',title: '网络设置'},
					// { name: 'icon-background',title: '手机边框'}
				]
			}
		},
		computed: {
			revoke_list() {
				
				return this.$store.getters.getPageConfigByPageId(this.$store.getters.curPageId).revoke.length
			},
			recovery_list() {
				return this.$store.getters.getPageConfigByPageId(this.$store.getters.curPageId).recovery.length
			}
		},
		watch: {
			revoke_list(new_val, old_val) {
				if (new_val > 0) {
					this.iconList[0].hueClass = false
				} else {
					this.iconList[0].hueClass = true
				}
			},
			recovery_list(new_val, old_val) {
				if (new_val > 0) {
					this.iconList[1].hueClass = false
				} else {
					this.iconList[1].hueClass = true
				}
			}
		},
		methods: {
			distribute_fun(fun_name) {
				switch (fun_name) {
					case 'cropper':
						this.cropper()
						break
					case 'img_replace':
						this.img_replace()
						break
					case 'img_del':
						this.img_del()
						break
					case 'music_replace':
						this.music_replace()
						break
					case 'music_del':
						this.music_del()
						break
				}
			},
			//背景图片裁剪
			cropper() {
				const pageId = this.$store.getters.curPageId
				const page = this.$store.getters.pages.find((page) => page.id === pageId)
				if (page) {
					const imgurl = page.css.bgi
					if (imgurl) {
						this.$store.commit('CROPPER_IMGURL', imgurl)
						this.$store.commit('SET_TESTIMG', {
							status: false,
							cropperImg: true,
							callback: (result) => {
								this.$store.dispatch('setPageBackImg', result)
							}
						})
					} else {
						alert('请先设置背景图')
					}
				}
			},
			// 背景图替换
			img_replace() {
				this.$store.commit('IMAGE_LIBRAY', {
					status: true,
					type: 'backimg',
					callback: (result) => {
						this.$store.dispatch('setPageBackImg', result.url)
					}
				})
			},
			// 背景图删除
			img_del() {
				this.$store.dispatch('setPageBackImg', "")
			},
			// 音乐替换
			music_replace() {
				this.$store.commit('SET_PICK_BGM', {
					status: true,
					callback: (bgm) => {
						this.$store.dispatch('setH5', {
							bgm: bgm.src
						})
					}
				})
			},
			// 音乐删除
			music_del() {
				this.$store.dispatch('setH5', {
					bgm: ''
				})
			},
			//判断是否需要显示二级图标
			show_menu(index, icon) {
				// 点击的是背景设置
				if (icon === 'icon-background') {
					const pageid = this.$store.getters.curPageId
					const page = this.$store.getters.getPageConfigByPageId(pageid)
					if (page && page.css.bgi) {
						this.iconList[index].show_tool = true
					} else {
						this.img_replace()
					}
				} else if (icon === 'icon-music') {
					const music = this.$store.getters.h5Config
					if (music && music.bgm) {
						this.iconList[index].show_tool = true
					} else {
						this.music_replace()
					}
				}
			},
			revoke(type) {
				if (type === 'revoke' || type === 'revokery') {
					this.$store.commit('REVOKE_STATE', true)
					// 撤销操作
					if (type === 'revoke') {
						this.$store.commit('REVOKE')
					} else {
						// 恢复操作
						this.$store.commit('RECOVERY')
					}
				}else if(type==='copy'){
					const pageid= this.$store.getters.curPageId
					// 复制当前页
					 this.$store.dispatch('copyPage', pageid)
				}
			}
		}
	}
</script>

<style lang="scss">
	.workspace {
		position: absolute;
		top: 0;
		right: -55px;
		text-align: center;

		a {
			display: block;
			width: 40px;
			height: 40px;
			line-height: 40px;
			color: #fff;
			background: rgba(0, 0, 0, .5)
		}

		a:hover {
			background: rgba(0, 0, 0, .7)
		}

		a.hueClass {
			color: #999;
		}
	}

	.exit-popover[x-placement^=left] .popper__arrow::after,
	.exit-popover[x-placement^=left] .popper__arrow {
		border-left-color: rgba(0, 0, 0, .5)
	}

	.exit-popover {
		background: rgba(0, 0, 0, .7);
		min-width: 97px;
		border-radius: 0;

		.left-tools .exit {
			display: flex;
			line-height: 30px;
			padding: 0 16px;
			justify-content: space-between;
			color: #fff;
			font-size: 12px;
		}

		.left-tools .exit:hover {
			background: #5c7aff;
		}
	}
</style>
